<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Captcha Example</title>
    <script>
        function getImg() {
            fetch('/captcha')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                });
        }

        function getCaptcha() {
            fetch("/captchaIsValid?code=" + document.getElementById('a').value).then(response => response.then(data => console.log(data)))
            // console.log(document.getElementById('a').value)
        }
    </script>
</head>
<body>
<!-- 验证码图片的容器 -->
<div id="captcha-container">
    <!-- 验证码图片将通过JavaScript动态加载 -->
    <img id="captcha-image" src="./imgs/test.png" alt="Captcha Image" onclick="getImg()"/>
</div>

<label for="a"></label><input type="text" id="a">
<button onclick="getCaptcha()">Get Captcha</button>
<button onclick="getImg()">Get Captcha</button>

<script>
    // 获取验证码的函数
    <%--function getCaptcha() {--%>
    <%--    // 使用fetch API发起GET请求到后端的/captcha路径--%>
    <%--    fetch('/captcha')--%>
    <%--        .then(response => {--%>
    <%--            if (!response.ok) {--%>
    <%--                throw new Error('Network response was not ok');--%>
    <%--            }--%>
    <%--            return document.getElementById("captcha-image").src = <%=request.getSession().getAttribute()%>; // 将响应转换为Blob对象--%>
    <%--        });--%>
    <%--}--%>
</script>
</body>
</html>
